<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">
			<u-notice-bar type="none" color='#fff' mode="horizontal" :list="list" :volume-icon="false" style="margin-top: -10rpx;"></u-notice-bar>
			</block>
		</cu-custom>
		
		<view class="" v-if="detail._id">
			<view class="cu-bar bg-white solid-bottom" :class="isCard?'margin-top':''">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text> change
				</view>
				<view class="action">
					<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
				</view>
			</view>
			<view class="cu-card dynamic" :class="isCard?'no-card':''">
				<view class="cu-item shadow">
					<view class="" v-if="detail.classfy==0" style="line-height: 80rpx;text-align: center;">
						记忆日期:{{detail.memoryDate}}
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="`background-image:url(${detail.user_id[0].avatar});`"></view>
							<view class="content flex-sub">
								<view>{{detail.user_id[0].nickName}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{detail.publish_dateTime |filterTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="" style="padding: 0 30rpx 0;margin-bottom: 20rpx;">
						<u-read-more ref="uReadMore" :show-height="200" :toggle='true' open-text='收起来~' close-text="展开全部~">
								<rich-text :nodes="content"></rich-text>
							</u-read-more>
					</view>
					<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
						<view class="" v-if="!isCard">
							<view class="bg-img"  v-for="(item,index) in detail.imgList" :key="index" @click="preview(index,detail.imgList)">
								<image :src="item" mode="widthFix" ></image>
							</view>
						</view>
						
						<view class="bg-img" :class="isCard?'':'only-img'" :style="`background-image:url(${item});`"
							v-for="(item,index) in detail.imgList" :key="index" v-if="isCard" @click="preview(index,detail.imgList)">
						</view>

					</view>
					<view class="text-gray text-sm text-right padding">
						<text class="cuIcon-attentionfill margin-lr-xs"></text> {{detail.watchCount}}
						<text class="cuIcon-appreciatefill margin-lr-xs" style="margin-left: 20rpx;"></text> 20
						<text class="cuIcon-messagefill margin-lr-xs" @click="publishComment(1)" style="margin-left: 20rpx;" v-if="detail.canComment"></text> {{detail.canComment?detail.commentTotal:''}}
					</view>

					<view class="cu-list menu-avatar comment solids-top" v-if="detail.canComment">
						<view class="cu-item" v-for="(item,index) in commentList" :key='index'>
							<view class="cu-avatar round" :style="`background-image:url(${item.user_id[0].avatar});`"></view>
							<view class="content">
								<view class="text-grey">{{item.user_id[0].nickName?item.user_id[0].nickName:item.user_id[0].mobile}}</view>
								<view class="text-gray text-content text-df">
									{{item.content}}
								</view>
								<view class="bg-grey padding-sm radius margin-top-sm  text-sm" v-for="(item2,index2) in item.ziArr">
									<view class="flex">
										<view>{{item2.user_id[0].nickName?item2.user_id[0].nickName:item2.user_id[0].mobile}}：</view>
										<view class="flex-sub">{{item2.content}}</view>
									</view>
								</view>
								<view class="margin-top-sm flex justify-between">
									<view class="text-gray text-df">{{item.createTime |filterTime}}</view>
									<view>
										<text class="cuIcon-appreciatefill text-red"></text>
										<text class="cuIcon-messagefill text-gray margin-left-sm" @click="publishComment(0,item)"></text>
									</view>
								</view>
							</view>
						</view>

						<view v-if="commentList.length==0&&detail.canComment" style="margin-top: 20rpx;" >
							
							<u-button type="info" @click="publishComment(1)">该记忆还未有人评论~点击抢沙发吧</u-button>
						</view>
					</view>
					
					<view v-else>
						<u-empty text="发布者设置不可评论~" mode="data" :show='true' ></u-empty>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-load load-modal" v-if="jiazai">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/loading.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
		<ygc-comment ref="ygcComment" 
		        :placeholder="commentText" 
		        @pubComment="pubComment"></ygc-comment>
	</view>
</template>

<script>
	import {
		getMemoryOne,
		publishComments,
		getComment
	} from '@/common/api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		timeTo
	} from '@/common/utils.js'
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	export default {
		components: {ygcComment},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data() {
			return {
				isCard: false,
				jiazai:true,
				content: '',
				list: [
						'折磨生出苦难','苦难又会加剧折磨','凡间这无穷的循环','将有我来终结！'
					],
				detail:{},
				memoryId:'',
				commentList:[],
				commentText:'发布评论',
				isParentComment:1,//是否是母评论1是0不是
				parentId:'',//母评论id
			};
		},
		filters:{
			filterTime(v){
				return timeTo(v)
			}
		},
		onLoad(options) {
					getMemoryOne(options).then(res=>{
						
						if(res.success){
							this.jiazai=false
							
							console.log(res)
							this.detail=res.result.data[0]
							this.list=[this.detail.title,'------',this.detail.memoryDate]
							this.content=this.detail.content
							this.memoryId = this.detail._id;
							this.getComments(this.detail._id)
							// getComment({memoryId:this.detail._id}).then(res2=>{
							// 	console.log(res2)
							// 	if(res2.success){
							// 		this.commentList = res2.result.data
							// 	}
							// }).catch(err=>{
							// 	console.log(err)
							// })
						}
					}).catch(err=>{
						console.log(err)
					})
					
					// // 模拟后端请求
					// setTimeout(() => {
					// 	this.content = `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
					// 	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
					// 	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
					// 	// 请注意上方已在组件中添加ref-uReadMore
					// 	this.$nextTick(() => {
					// 		this.$refs.uReadMore.init();
					// 	})
					// }, 2000);
		},
		methods: {
			IsCard(e) {
				this.isCard = e.detail.value
			},
			//重组评论数组
			restCommentList(arrs){
					let mu = arrs.filter(item=>{
				      return item.isParentComment==1
				    })
				    let zi = arrs.filter(item=>{
				      return item.isParentComment==0
				    })
				    let comments=[]
				    mu.map(item=>{
				    item.ziArr=[]
				      zi.map(item2=>{
				        if(item._id==item2.parentId){
				          item['ziArr'].push(item2)
				
				        }
				      })
				      comments.push(item)
				    })
					return comments
			},
			getComments(memoryId){
				getComment({memoryId:memoryId}).then(res2=>{
					console.log(res2)
					if(res2.success){
						this.commentList = this.restCommentList(res2.result.data)
						//console.log(this.restCommentList(res2.result.data),'ccccccc')
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			publishComment(t,item){//弹框
				console.log(item)
				
				this.isParentComment = t
				if(t==1){//母评论
					this.parentId = '';
					this.commentText = '发布评论'
				}else{
					this.parentId = item._id;
					this.commentText= `回复${item.user_id[0].nickName?item.user_id[0].nickName:item.user_id[0].mobile}:` 
				}
				
				if(!this.hasLogin){
					uni.showModal({
						title: '未登录',
						content: '您未登录，需要登录后才能继续',
						showCancel: !this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}
						}
					})
				}else{
					this.$refs.ygcComment.toggleMask('show')
				}
				
			},
			pubComment(val){
				console.log(val)
				if(val){
					publishComments({
						content:val,
						type:'memory',
						isParentComment:this.isParentComment,
						memoryId:this.memoryId,
						parentId:this.parentId,
						createTime:new Date().getTime(),
						comment_date:this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
					}).then(res=>{
						console.log(res,'resssss')
						if(res.success){
							uni.showToast({
								title:'评论成功~'
							})
							this.$refs.ygcComment.toggleMask()
							this.getComments(this.memoryId)
						}
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			preview(index,imgList){
				// 预览图片
				        uni.previewImage({
							current:index,
				            urls:imgList,
				            longPressActions: {
				                itemList: ['发送给朋友', '保存图片', '收藏'],
				                success: function(data) {
				                    console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				                },
				                fail: function(err) {
				                    console.log(err.errMsg);
				                }
				            }
				      });
			}
		}
	}
</script>

<style>

</style>
